<template>
  <div class="item">
    <div class="line"><span class="el-icon-caret-bottom" /></div>
    <div class="item-content">
      <div class="content-header">
        <span>{{ item.title }}</span>
        <span class="el-icon-circle-close" @click="removeFlow" />
      </div>
      <div class="content-body">
        <div>{{ item.position }}</div>
        <div>{{ item.role }}</div>
      </div>
    </div>
    <div class="line l-40" />
    <span class="el-icon-circle-plus" @click="addFlow" />
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    addFlow() {
      this.$emit('addFlow')
    },
    removeFlow() {
      this.$emit('removeFlow')
    }
  }
}
</script>

<style lang="less">
.item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .item-content{
     width: 80%;
     border: 1px solid #000;
    .content-header {
      width: 100%;
      height: 30px;
      background-color:cornsilk;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
    }
    .content-body {
      text-align: left;
      background: cadetblue;
      padding: 10px;
      line-height: 30px;
    }
  }
}
.line {
  width: 0;
  height: 40px;
  border-left: 1px solid #000;
  position: relative;
}
.l-40 {
  height: 40px;
}
.el-icon-circle-close {
  font-size: 24px;
}
.el-icon-caret-bottom {
  position: absolute;
  left: 0;
  bottom: -10px;
  transform: translateX(-50%);
  font-size: 30px;
}
 .el-icon-circle-plus {
   font-size: 40px;
   margin-top: -1px;
   cursor: pointer;
 }
 .el-icon-circle-plus:hover {
   color:coral
 }
</style>
